<template>
	<view>
		<view class="fixbox">
			<!-- 搜索区域 -->
			<view class="search-area">
				<u-search
					v-model="keyword"
					placeholder="请输入职位关键字"
					:clearabled="true"
					:action-style="{ color: '#4095E5' }"
					shape="square"
					bg-color="#EFEFEF"
					border-color="#BBBBBB"
					height="80rpx"
				></u-search>
			</view>

			<!-- 下拉框 -->
			<view class="sel">
				<fy-dropdown :menuList="menuList">
					<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions" type="column" @change="handlerColumnChange"></fy-dropdown-item>
					<fy-dropdown-item v-model="placeValue" dropdownKey="place" :options="placeOptions" @change="(e) => handlerTypeChange(e, 'place')"></fy-dropdown-item>
					<fy-dropdown-item v-model="studyValue" dropdownKey="study" :options="studyOptions" @change="(e) => handlerTypeChange(e, 'study')"></fy-dropdown-item>
					<fy-dropdown-item v-model="termValue" dropdownKey="term" :options="termOptions" @change="(e) => handlerTypeChange(e, 'term')"></fy-dropdown-item>
				</fy-dropdown>
			</view>
		</view>
		<!-- 岗位列表 -->
		<!-- 动态与fixed保持距离 -->
		<view class="recuirLists" :style="{ paddingTop: fixHeight }">
			<view class="recuirLists-item" v-for="(item1, index1) in recruitData" :key="item1.id">
				<recruitList :recruitData="item1" @recruitDetail="gotoDetail"></recruitList>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框的value
			keyword: '',
			// 放置选择的数据
			selData: {
				s1: '',
				s2: '',
				s3: '',
				s4: ''
			},
			menuList: [
				{ title: '全部', dropdownKey: 'synthesis' },
				{ title: '地点', dropdownKey: 'place' },
				{ title: '专业', dropdownKey: 'study' },
				{ title: '筛选条件', dropdownKey: 'term' }
			],
			synthesisValue: '',
			columnOptions: [
				{
					title: '地点',
					key: 'p',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '清远市', value: '1' },
						{ text: '广州市', value: '2' },
						{ text: '深圳市', value: '3' }
					]
				},
				{
					title: '专业',
					key: 's',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '软件技术', value: '1' },
						{ text: '现代物流', value: '2' },
						{ text: '食品检测', value: '3' }
					]
				},
				{
					title: '筛选条件',
					key: 't',
					default: '',
					list: [
						{ text: '全部', value: '' },
						{ text: '软件技术', value: '1' },
						{ text: '现代物流', value: '2' },
						{ text: '食品检测', value: '3' }
					]
				}
			],
			placeValue: '',
			placeOptions: [
				{ label: '清远市', value: 1 },
				{ label: '广州市', value: 2 },
				{ label: '深圳市', value: 3 }
			],
			studyValue: '',
			studyOptions: [
				{ label: '软件技术', value: 1 },
				{ label: '现代物流', value: 2 },
				{ label: '食品检测', value: 3 },
				{ label: '大数据', value: 4 }
			],
			termValue: '',
			termOptions: [
				{ label: '筛选条件3', value: 1 },
				{ label: '筛选条件33', value: 2 },
				{ label: '筛选条件333', value: 3 }
			],

			// 存储fixed盒子的高度
			fixHeight: '260rpx',
			
			// 岗位列表的数据
			recruitData:[
				{
					id:1,
					title:'1JAVA开发工程师',
					require:'广州市 | 应届毕业生 | 专科及以上',
					img:'/static/page1.jpg',
					comname:'广州无限大科技有限公司',
					welfare:['五险一金','年底双薪','周末双休'],
					salary:'3K-5K',
					cometime:'30分钟前'
				},{
					id:2,
					title:'2JAVA开发工程师',
					require:'广州市 | 应届毕业生 | 专科及以上',
					img:'/static/page1.jpg',
					comname:'广州无限大科技有限公司',
					welfare:['五险一金','年底双薪','周末双休'],
					salary:'3K-5K',
					cometime:'30分钟前'
				},{
					id:3,
					title:'3JAVA开发工程师',
					require:'广州市 | 应届毕业生 | 专科及以上',
					img:'/static/page1.jpg',
					comname:'广州无限大科技有限公司',
					welfare:['五险一金','年底双薪','周末双休'],
					salary:'3K-5K',
					cometime:'30分钟前'
				},{
					id:4,
					title:'4JAVA开发工程师',
					require:'广州市 | 应届毕业生 | 专科及以上',
					img:'/static/page1.jpg',
					comname:'广州无限大科技有限公司',
					welfare:['五险一金','年底双薪','周末双休'],
					salary:'3K-5K',
					cometime:'30分钟前'
				}
			]
		};
	},
	methods: {
		handlerColumnChange(e) {
			if (e.cancel) return;

			this.columnOptions.forEach((item) => {
				item.default = e.data[item.key];
			});
		},
		handlerTypeChange(e, selType) {
			switch (selType) {
				case 'place':
					this.selData.s2 = e;
					break;
				case 'study':
					this.selData.s3 = e;
					break;
				case 'term':
					this.selData.s4 = e;
					break;
			}
		},
		// 跳转去岗位详情
		gotoDetail(item) {
			// 统一设置收藏为false
			item.collectState=false
			uni.navigateTo({
				// url要传id参数
				// 加密url参数对象
				url: '/subpkg/recruit/recruitDetail?item='+encodeURIComponent(JSON.stringify(item))
			});
		}
	},
	onReady() {
		// 获取被fixed的盒子的高度
		uni.createSelectorQuery()
			.selectAll('.fixbox')
			.boundingClientRect((data) => {
				this.fixHeight = data[0].height * 2 + 30 + 'rpx';
			})
			.exec();
	}
};
</script>

<style lang="scss" scoped>
.search-area {
	padding: 40rpx 40rpx 30rpx;
}
.recuirLists {
	padding-top: 260rpx;
}
.fixbox {
	position: fixed;
	z-index: 99;
	background-color: white;
}
.recuirLists-item {
	border-top: 2rpx solid #bbbbbb;
	&:last-child {
		border-bottom: 2rpx solid #bbbbbb;
	}
}
</style>
